<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>评测报告</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./lib/css/layui.css" media="all">
</head>

<body>
    <div class="root" id="root" style="height: 0px;">
        <div id="exportDiv">                  
            <div class="page">
                <div style="font-weight: bold; text-align: center; padding: 20px; font-size: 36px;color: #FA9F49;">
                    儿童专注力评估报告</div>
                <div class="title"> <i></i>基本信息 </div>
                <div class="baseContent">
                    <table style="width: 100%;">
                        <tr>
                            <td class="tableTitle">儿童姓名</td>
                            <td><span id="name"></span></td>
                            <td class="tableTitle">儿童性别</td>
                            <td><span id="sex"></span></td>
                        </tr>
                        <tr>
                            <td class="tableTitle">测试年龄</td>
                            <td><span id="age"></span></td>
                            <td class="tableTitle">评估中心</td>
                            <td><span id="orgName"></span></td>
                        </tr>
                        <tr>
                            <td class="tableTitle">评估老师</td>
                            <td><span id="teacher"></span></td>
                            <td class="tableTitle">评估时间</td>
                            <td><span id="testDate"></span></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="page">
                <div class="title"> <i></i>整体评估结果</div>
                <div class="pageContent">
                    <p>
                        专注力，也被称为注意力集中或专心，是指个体将精力投入到特定任务或刺激上，并忽视其他无关的因素的能力。这种精神状态贯穿于我们的日常生活和学习工作中，它能够帮助我们保持对目标的锐利思考，有效地处理信息，并进行深入的思维和学习。
                    </p>
                    <p>
                        儿童专注力并非天生铸就，却是决定孩子未来学习能力和生活技能发展的关键因素。良好的专注力可以助力孩子们充分吸收信息，更好地理解复杂概念。通过定制化的专注力练习，可以帮助孩子们提高记忆力，加快思维速度，提升解决问题的能力。更为重要的孩子们可以学会如何更有效地管理时间，如何深入投入一项任务，不断提升自我。
                    </p>
                    <div class="pageItem"><i></i>专注力指标分布图</div>
                    <div class="pring-chart" id="profileChart" style="width: 100%;height:400px;margin: 0 auto;"></div>
                    <div class="page-break""></div>
                    <p>
                        1. 极弱：无法集中注意力，易受干扰，影响日常效率。
                    </p>
                    <p>
                        2. 较弱：一定程度上集中注意力，遇复杂或长时间任务有困难。
                    </p>
                    <p>
                        3. 不足：大部分任务可以应对，高难度或长时任务可能分心。
                    </p>
                    <p>
                        4. 中等：基本上可以保持注意力集中，完成任务，但有提升空间。
                    </p>
                    <p>
                        5. 优秀：各种情况下都能维持高度专注，提高工作或学习效率。
                    </p>
                    <div class="pageItem"><i></i>建议训练项目</div>
                    <div>
                        <table class="courseTable">
                            <tr style="background-color: #FA9F49;height: 50px;color: #fff;">
                                <td style="text-align: center;width: 100px;">类型</td>
                                <td style="text-align: center;">内容</td>
                            </tr>
                            <tr>
                                <td style="text-align: center">专注力</td>
                                <td id="courseName"></td>
                            </tr>
                            <tr>
                                <td style="text-align: center">感统</td>
                                <td>直梯大滑板，羊角球，趴地推球，拍篮球，套圈，阳光隧道，飞机定型，贴地前进，万象组合</td>
                            </tr>
                            <tr>
                                <td style="text-align: center">课时</td>
                                <td id="courseHour"></td>
                            </tr>


                        </table>
                    </div>
                </div>
            </div>
            <div class="page">
                <div class="title"><i></i>听觉专注力-评估结果</div>
                <div class="pageContent">
                    <p>
                        听觉专注力在上学听课时起着核心作用，它能够帮助学生们在讲解过程中保持专心，有效地吸收和理解类信息。充足的听觉专注力能有效屏蔽课堂上的各种外界干扰，使学生能够始终保持对讲师话语的关注。此外，良好的听觉专注力不仅能提高学生的理解和记忆能力，更能促进他们的思考和独立见解的形成，对他们的学业成绩和个人发展都具有深远影响。因此，提高听觉专注力对于学生来说至关重要。
                    </p>

                    <table class="resultTable">
                        <tr style="background-color: #FA9F49;height: 50px;color: #fff;">
                            <td>评估项目</td>
                            <td>结果</td>
                            <td>等级分数</td>
                        </tr>
                        <tr>                            
                            <td id="hearingName0"></td>
                            <td id="levelName0"></td>
                            <td id="hearingScore0"></td>
                        </tr>
                        <tr>
                            <td id="hearingName1"></td>
                            <td id="levelName1"></td>
                            <td id="hearingScore1"></td>
                        </tr>
                        <tr>
                            <td id="hearingName2"></td>
                            <td id="levelName2"></td>
                            <td id="hearingScore2"></td>
                        </tr>
                        <tr>
                            <td id="hearingName3"></td>
                            <td id="levelName3"></td>
                            <td id="hearingScore3"></td>
                        </tr>
                    </table>
                
                    <div style="text-align: center;padding-top: 80px;">
                        <span class="mark"><i style="background-color: red;"></i>极弱</span>
                        <span class="mark"><i style="background-color: #f56e00;"></i>较弱</span>
                        <span class="mark"><i style="background-color: #ffbb00;"></i>不足</span>
                        <span class="mark"><i style="background-color: blue;"></i>中等</span>
                        <span class="mark"><i style="background-color: green;"></i>优秀</span>
                    </div>
                    <div class="pring-chart" id="hearingChart" style="opacity:0.75; width: 100%;height:400px;margin: 0 auto;"></div>
                    
                </div>
            </div>
            <div class="page">
                <div class="title"><i></i>听觉广度-评估结果</div>
                <div class="pageContent">
                    <p>
                        听觉广度指的是个体同时接收和处理多元音频信息的能力。在上学听课环境中，学生应具备一定的听觉广度，以便对老师的主讲、同时发生的同学提问或讨论等多源信息进行有效接收和理解，以丰富知识视角，更深入地理解和学习课题内容。但过大的听觉广度可能导致注意力分散，建议适度控制。
                    </p>
                    <div class="pring-chart" id="item0" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>听觉广度好的表现</div>
                    <p>
                        1. 可同时关注老师讲解与同学提问，加深理解；
                    </p>
                    <p>
                        2. 有效区分在讲座或研讨会中的各种音频信息，提升学习效率；
                    </p>
                    <p>
                        3. 对老师的指令能快速捕捉并应答，调整学习策略，优化学习效果。
                    </p>
                    <div class="pageItem"><i></i>听觉广度不良的表现</div>
                    <p>1. 无法同时关注老师授课和同学讨论，导致信息获取不全；</p>
                    <p>
                        2. 在信息复杂的课程中难以有效理解和把握关键点，学习效率较低；</p>
                    <p>3. 对老师的问题不能迅速和准确地做出反应，影响课堂互动和学习质量。</p>
                </div>
            </div>
            <div class="page">
                <div class="title"><i></i>听觉记忆-评估结果</div>
                <div class="pageContent">
                    <p>
                        听觉工作记忆是指在短时间内通过听觉接收、保存和处理信息的能力。在上课时学生需要利用这项能力来聆听、理解并记住老师的讲解。当老师解释一个复杂的概念或步骤时，学生需要暂时记住前面的内容，以便对后面的信息进行理解和整合。另外，听觉工作记忆还能帮助学生在课堂讨论中快速响应和参与。若学生的听觉工作记忆能力强，则可以更有效地理解和吸收新的学习内容，从而提高学习效率和质量。
                    </p>
                    <div class="pring-chart" id="item1" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>听觉工作记忆好的表现</div>
                    <p> 1. 准确地理解老师讲解的重点知识点，能够在课后进行高效复习和巩固。</p>
                    <p>2. 在课堂讨论和问答环节，能快速回顾和应用听到的信息，表现出敏捷的思维反应。</p>
                    <p>3. 即使在课程内容繁多的情况下，仍能保持较高的听觉理解和记忆能力，将所学知识长期深入记忆。</p>
                    <div class="page-break"></div>
                    <div class="pageItem"><i></i>听觉工作记忆不良的表现</div>
                    <p> 1. 难以记住和理解老师在课堂讲解的关键内容，课后经常需要重新学习。</p>
                    <p>2. 在课堂讨论和问答时无法迅速记起和应用所听到的信息，反应迟钝。</p>
                    <p>3. 即使在短时间内接受大量的听觉信息，也难以有效地将这些信息转化为长久的记忆，对学习进度和效果产生负面影响。</p>
                </div>
            </div>
            <div class="page">
                <div class="title"><i></i>听觉加工-评估结果</div>
                <div class="pageContent">
                    <p>
                        听觉加工速度是指在上学听课过程中，对讲述的信息进行接收、理解和内化的处理速度。良好的听觉加工速度能让学生快速吸收大量信息，从而降低课堂遗漏重要内容的可能性。此外，学生可以在短时间内对所听到的知识进行分析、归纳和总结，由此更好地参与课堂讨论和回答问题。高效的听觉加工速度有助于提升学习效率，节省复习时间，促进学生在课程中取得良好的学术表现。
                    </p>
                    <div class="pring-chart" id="item2" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>听觉加工速度好的表现</div>
                    <p> 1. 在听课时可快速理解和吸收老师讲解的新知识，少有听不懂或漏掉重要信息的情况。</p>
                    <p>2. 在课堂问答环节时能提出有深度的问题或高质量的答案，展现出对讲解内容的快速领悟和深入理解。</p>
                    <p>3. 课后复习阶段，能高效地在已接收到的听觉信息中抽提关键点，快速完成知识点的梳理和复习，提高学习效率。</p>
                    <div class="pageItem"><i></i>听觉加工速度不良的表现</div>
                    <p> 1. 对于老师的讲解经常感到困惑，难以跟上课堂的节奏，常常错过或误解关键信息。</p>
                    <p>2. 在课堂互动中表现被动，不容易提出问题或者回答问题，因理解和响应速度较慢。</p>
                    <p>3. 需要花费额外的时间和精力来复习和理解听课的内容，学习效率较低。</p>
                    <p>4. 对听到的信息记忆模糊，短时间内可能就忘记，导致知识点掌握和应用困难。</p>
                </div>
            </div>
            <div class="page">
                <div class="title"><i></i>听觉稳定-评估结果</div>
                <div class="pageContent">
                    <p>
                        听觉稳定性是指保持持续高水平的听觉警觉性和聚焦能力。从学习的角度来看，听觉稳定性非常重要。在上课时，学生需要展现出良好的听觉稳定性，也就是能集中精力持续有效地听讲，并从中获得和吸收信息。不仅需要对老师的讲解进行深入的理解，还要注意捕捉并解读课堂中的其他声音信息，诸如同学的提问或讨论。良好的听觉稳定性可以大幅度提高学生对课堂信息的接收效率，增强理解能力，从而提升学习成果。
                    </p>
                    <div class="pring-chart" id="item3" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>听觉稳定性好的表现</div>
                    <p> 1. 可以持续专心地关注老师的讲解，不易被分心，表现出高度的听觉警觉性。</p>
                    <p>2. 可以有效地理解、记忆和再现老师的讲解，表现出优秀的课堂学习效率。</p>
                    <p>3. 即使在长时间的听课过程，也能保持好的听觉集中度和理解力，不易出现听课疲劳。</p>
                    <div class="pageItem"><i></i>听觉稳定性不良的表现</div>
                    <p> 1. 容易被周围环境的杂音干扰，导致注意力分散，不能全神贯注地听课。</p>
                    <p>2. 对老师讲解的内容理解和记忆困难，导致课堂学习效果不佳。</p>
                    <p>3. 在长时间听课后出现疲劳，难以维持集中注意力，影响对后续讲解的理解。</p>
                    <p>4. 对课堂讨论和问题回答反应迟钝，无法准确把握问题要点，影响互动质量。</p>
                </div>
                <div class="page-break"></div>
            </div>            
            
            <div class="page">
                <div class="title"><i></i>视觉专注力-评估结果</div>
                <div class="pageContent">
                    <p>
                        视觉专注力对学生学习至关重要。首先，我们的大部分学习信息来自于视觉。无论阅读、写作还是解决数学问题，都需要强大的视觉专注力。其次，视觉专注力有助于学生在繁多的信息中筛选出重点，同时抑制无关的干扰物或者活动。例如，课堂上，良好的视觉专注力可以帮助学生集中注意力在老师身上，同时忽视其他学生的动作。此外，适当的视觉专注练习可以提高学生的记忆力，辅助他们记住更多的信息。因此，对于每一个学生来说，培养视觉专注力都是至关重要的。
                    </p>

                    <table class="resultTable">
                        <tr style="background-color: #FA9F49;height: 50px;color: #fff;">
                            <td>评估项目</td>
                            <td>结果</td>
                            <td>等级分数</td>
                        </tr>
                        <tr>                            
                            <td id="visionName4"></td>
                            <td id="levelName4"></td>
                            <td id="visionScore4"></td>
                        </tr>
                        <tr>
                            <td id="visionName5"></td>
                            <td id="levelName5"></td>
                            <td id="visionScore5"></td>
                        </tr>
                        <tr>
                            <td id="visionName6"></td>
                            <td id="levelName6"></td>
                            <td id="visionScore6"></td>
                        </tr>
                        <tr>
                            <td id="visionName7"></td>
                            <td id="levelName7"></td>
                            <td id="visionScore7"></td>
                        </tr>
                        <tr>
                            <td id="visionName8"></td>
                            <td id="levelName8"></td>
                            <td id="visionScore8"></td>
                        </tr>
                    </table>
                    <div style="text-align: center;padding-top: 10px;">
                        <span class="mark"><i style="background-color: red;"></i>极弱</span>
                        <span class="mark"><i style="background-color: #f56e00;"></i>较弱</span>
                        <span class="mark"><i style="background-color: #ffbb00;"></i>不足</span>
                        <span class="mark"><i style="background-color: blue;"></i>中等</span>
                        <span class="mark"><i style="background-color: green;"></i>优秀</span>
                    </div>
                    <div class="pring-chart" id="visionChart" style="opacity:0.75; width: 100%;height:400px;margin: 0 auto;"></div>
                </div>
                <div class="page-break"></div>
            </div>
            <div class="page">
                <div class="title"><i></i>视觉分辨-评估结果</div>
                <div class="pageContent">
                    <p>
                        专注力训练中的"视觉分辨"通常指的是通过视觉刺激来提高专注力的练习。这些训练旨在增强个体对视觉细节的注意力并提高分辨力。例如，一个常见的视觉分辨训练任务是找出一系列相似图形或符号中的微小差别，或者在快速呈现的一系列图片中识别特定的目标对象。
                    </p>
                    <div class="pring-chart" id="item4" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>视觉分辨好的表现</div>
                    <p> 1. 清晰度：能够清楚地看到小的和/或远程的细节，例如阅读远处的标牌或辨识微小的文字。</p>
                    <p>2. 对比敏感性：能够分辨相近颜色或灰度之间的细微差异，更好地理解图像或场景的深度和纹理。</p>
                    <p>3. 辨识速度：迅速识别和分辨视觉信息，这在快速变动的环境中尤为重要，如运动比赛、驾驶等。</p>
                    <p>4. 视野宽广：良好的周边视觉能力，能够注意到并理解视野中偏离中心的对象。</p>
                    <p>5. 视觉搜索：在复杂的视觉环境中快速找到目标物体，如在繁杂的背景中找到特定的形状或符号。</p>
                    <p>6. 目标追踪：能够持续地跟踪移动物体，这对运动员等特定职业人士尤为重要。</p>
                    <p>7. 视觉记忆力：看到的图像、场景或信息能够被准确快速地记住和回忆。</p>
                    <p>8. 视觉注意力的保持：能长时间保持对视觉任务的专注，尽管可能存在分心或干扰。</p>
                    <div class="pageItem"><i></i>视觉分辨不良的表现</div>
                    <p> 1. 分辨力差：难以区分细节和轮廓，难以看清小字或在低对比度情况下认出物体。</p>
                    <p>2. 辨色困难：难以区分不同颜色或阴影，可能与色盲或色弱有关。</p>
                    <p>3. 视野限制：周边视野受限，可能会导致难以注意到或处理视野边缘的视觉信息。</p>
                    <p>4. 注意力分散：容易被干扰物或无关的视觉信息分散注意力，难以集中于特定的视觉任务。</p>
                    <p>5. 追踪困难：跟踪移动物体时出现困难，例如在观看快速移动的物体和人时。</p>
                </div>
                <div class="page-break"></div>
            </div>
            <div class="page">
                <div class="title"><i></i>视觉广度-评估结果</div>
                <div class="pageContent">
                    <p>
                        视觉广度则是指学生对视野范围内的多样信息进行快速捕捉与处理的能力。视觉分辨能力是指学生在学习过程中能清晰地识别和分辨各种图像、文字和符号，使其能够准确地识别和理解学习资料。具备这两项能力的学生在学习过程中，能迅速理解和掌握教材、作业及测试中的各种内容，对多样信息进行并行处理以及全局关联。优秀的视觉分辨和视觉广度有助于提升学生的学习效率与深度，以推动更高质量的学术表现。
                    </p>
                    <div class="pring-chart" id="item5" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>视觉广度好的表现</div>
                    <p> 1. 快速获取和处理信息：视觉广度好的学生在阅读、分析数据或图形时表现出较高的速度和效率。</p>
                    <p>2. 并列信息处理：他们能一眼看到的信息更多，针对多元任务有着优秀的表现。</p>
                    <p>3. 关联和整合信息：在解决复杂问题时，他们能快速关联和整合全局信息，提出有效解决方案。</p>
                    <p>4. 快速识别信息：学生可以迅速分辨书本、课件或是实验中的图像、符号、文字等内容。</p>
                    <p>5. 细节把握能力强：对于复杂的图表或数据，学生有能力准确把握并理解其中的细节信息。</p>
                    <div class="pageItem"><i></i>视觉广度不良的表现</div>
                    <p> 1. 信息处理速度慢：学生在阅读或分析数据、图形时需要花费更多的时间和精力。</p>
                    <p>2. 处理信息的范围有限：无法同时捕捉到多元的信息，导致捕获关键信息的能力存在缺陷。</p>
                    <p>3. 信息识别困难：学生对图像、文字或符号等的识别较慢，可能会出现理解错误。</p>
                    <p>4. 学习速度缓慢：由于视觉分辨较弱，可能学生在理解新知识、完成学习任务上花费更多的时间。</p>
                </div>
                <div class="page-break"></div>
            </div>
            <div class="page">
                <div class="title"><i></i>视觉记忆-评估结果</div>
                <div class="pageContent">
                    <p>
                        视觉工作记忆是指我们的大脑能临时存储和处理有关视觉信息的能力，它对学生的学习具有重要的影响。首先，视觉工作记忆能帮助学生更好地吸收和理解图表、地图等视觉资料，尤其在理科和艺术类课程中尤为重要。其次，好的视觉工作记忆有助于学生在思维过程中形成和维持学习的视觉模型，从而帮助他们理解和解决复杂的问题。例如，在学习围棋或数学时，视觉工作记忆可帮助学生在脑海中调出和维持局部游戏状态或数学公式，以便进行更深入的学习和思考。在一些需要视觉空间技巧的科目中，视觉工作记忆的优势更无法替代。
                    </p>
                    <div class="pring-chart" id="item6" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>视觉工作记忆好的表现</div>
                    <p> 1. 学生能准确理解图表、图片或可视化内容，如地图、图形推理题等，将其与讲授的知识快速联系起来。</p>
                    <p>2. 视觉信息记忆能力强：能迅速记住教师在板书内容，使得学习建立在已存储视觉信息的基础之上，减少记忆负担。</p>
                    <p>3. 空间方向感强：在学习如几何或物理等需要空间想像的科目时，能有效利用视觉工作记忆构建和操作空间模型，从而提升学习效果。</p>
                    <div class="pageItem"><i></i>视觉工作记忆不良的表现</div>
                    <p> 1. 在处理图表、图片或可视化信息时容易遇到困难，例如不理解地图、图形推理题等。</p>
                    <p>2. 对于教师板书或视觉资料的记忆力较弱，需要频繁复习才能记住。</p>
                    <p>3. 在涉及空间方向的学科如几何、物理中，绘制和理解空间模型有困难。</p>
                    <p>4. 难以在脑中形成视觉模型：解决问题时，无法有效地在脑海中构建和操作视觉模型，影响了学习效能。</p>
                </div>
                <div class="page-break"></div>
            </div>
            <div class="page">
                <div class="title"><i></i>手部控制-评估结果</div>
                <div class="pageContent">
                    <p>
                        手部控制能力在学生的学习过程中占有重要的地位。这种能力不仅影响手写的速度和整洁度，更会影响到诸如实验操作、艺术创作以及其他手工技能的学习实践。对于优良的手部控制能力，会直接影响学生的学习效率，比如做笔记时能迅速准确地记录重要信息，或是在实验中精准完成各步操作，以避免错误的发生。此外，良好的手部控制能力也有助于学生在其它非学术性的活动中，如运动或乐器练习中获取更好的表现。因此，从学习的角度来看，提高手部控制能力是非常必要的。
                    </p>
                    <div class="pring-chart" id="item7" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>手部控制好的表现</div>
                    <p> 1. 拥有良好手部控制能力的学生书写速度适中，字迹美观，能快速地完成书面作业。</p>
                    <p>2. 在实验、绘画或手工课程中，学生能准确无误地完成各种精细操作，避免错误。</p>
                    <p>3. 这些学生在记录笔记、整理资料等方面表现出较高的效率，有助于提升学习质量。</p>
                    <div class="pageItem"><i></i>手部控制不良的表现</div>
                    <p> 1. 手部控制不良的学生书写速度较慢，字迹潦草，无法快速完成书面作业。</p>
                    <p>2. 在实验、绘画或手工课程中，学生容易出现操作失误，影响学习成果和效率。</p>
                    <p>3. 这些学生在整理笔记、资料等方面效率较低，往往导致错过重要信息或降低学习质量。</p>
                </div>
                <div class="page-break"></div>
            </div>
            <div class="page">
                <div class="title"><i></i>视觉加工-评估结果</div>
                <div class="pageContent">
                    <p>
                        视觉加工速度是指学生在学习过程中对视觉信息识别、理解和记忆的速度。视觉加工速度对学生学习至关重要，因为学习过程中会涉及大量文字、图像、表格等视觉信息。如果学生具备良好的视觉加工速度，他们能迅速识别关键信息，高效地了解和掌握知识点，从而减轻认知负担和避免学习疲劳。此外，优秀的视觉加工速度还有助于提高学生在处理空间方向、逻辑推理等需要视觉思考的学科的解题效率和准确率。
                    </p>                  
                    <div class="pring-chart" id="item8" style="width: 100%;height: 400px;margin: 0 auto;"></div>
                    <div class="pageItem"><i></i>视觉加工速度好的表现</div>
                    <p> 1. 高效识别关键信息：学生能迅速从文字、图像等资料中找到核心内容，提高学习效率。</p>
                    <p>2. 空间处理能力强：在几何、物理等涉及空间方向和模型的学科中表现出色，较快地解题。</p>
                    <p>3. 反应迅速：在课堂讨论或答题时，能快速理解问题，准确地给出回应，显示出良好的学术表现。</p>
                    <div class="pageItem"><i></i>视觉加工速度不良的表现</div>
                    <p> 1. 理解速度慢：学生处理文字、图像信息时较费力，影响学习效率。</p>
                    <p>2. 掌握知识困难：较难吸收关键概念，导致知识掌握不牢固。</p>
                    <p>3. 空间处理能力弱：在涉及空间方向、模型的学科中表现欠佳，解题速度较慢。</p>
                    <p>4. 对视觉冲击敏感：容易受到视觉干扰，影响注意力集中，导致学业成绩下滑。</p>
                </div>
                <div class="page-break"></div>
            </div>
            
            <div class="page">
                <div class="title"><i></i>专注力评估结果</div>
                <div class="pageContent">
                    <table class="resultTable">
                        <tr style="background-color: #FA9F49;height: 50px;color: #fff;">
                            <td>评估项目</td>
                            <td>结果</td>
                            <td>等级分数</td>
                        </tr>
                        <tr>
                            <td rowspan="4">听觉专注力</td>
                            <td id="itemName0"></td>
                            <td id="itemScore0"></td>
                        </tr>
                        <tr>
                            <td id="itemName1"></td>
                            <td id="itemScore1"></td>
                        </tr>
                        <tr>
                            <td id="itemName2"></td>
                            <td id="itemScore2"></td>
                        </tr>
                        <tr>
                            <td id="itemName3"></td>
                            <td id="itemScore3"></td>
                        </tr>
                        <tr>
                            <td rowspan="5">视觉专注力</td>
                            <td id="itemName4"></td>
                            <td id="itemScore4"></td>
                        </tr>
                        <tr>
                            <td id="itemName5"></td>
                            <td id="itemScore5"></td>
                        </tr>
                        <tr>
                            <td id="itemName6"></td>
                            <td id="itemScore6"></td>
                        </tr>
                        <tr>
                            <td id="itemName7"></td>
                            <td id="itemScore7"></td>
                        </tr>
                        <tr>
                            <td id="itemName8"></td>
                            <td id="itemScore8"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="print-space">
        </div>
    </div>
    <script src="./lib/layui.js" charset="utf-8"></script>
    <script src="./config.js"></script>
    <script src="./lib/echarts.min.js" charset="utf-8"></script>
    <script src="./profileChart.js" charset="utf-8"></script>
    <script src="./typeChart.js" charset="utf-8"></script>
    <script src="./gaugeChart.js" charset="utf-8"></script>
    <script>
        layui.use(["jquery"], function () {
            var $ = layui.$;
            var id = getQueryString("id");
            request($, "get", requestUrl + "/service/focus-service/test/publicApi/test?id=" + id, null, function (res) {
                if(res.check_type==1){
                    location.replace("checkReport.html?id="+id);
                    return;
                }
                request($, "get", requestUrl + "/service/focus-service/courseSetting/publicApi/courseByLevel?age=" + res.age + "&level=" + res.averageScore, null, function (res) {
                    $("#root").height("auto");
                    var names = "";
                    var courseCount=0;
                    for (var i = 0; i < res.length; i++) {
                        names+="<span style='font-weight:bold;color:#FA9F49'>"+res[i].type+"</span>:";
                        for (var j = 0; j < res[i].items.length; j++) {                                                        
                            courseCount+=res[i].items[j].hour;                            
                        }
                            //names+="<p><span style='font-weight:bold'>"+res[i].items[j].phase+":</span> ";
                            names+="<p>"
                            names += res[i].items[0].courseNames.slice(0,7).join("，");
                            names += " 等...</p>";
                        //}                        
                    }
                    $("#courseName").html(names);
                    $("#courseHour").text(courseCount+"个课时")
                });
                $("#name").text(res.name);
                $("#sex").text(res.sex);
                $("#age").text(res.age);
                $("#orgName").text(res.orgName);
                $("#teacher").text(res.teacher);
                $("#testDate").text(res.testDate);
                profileChartInit("profileChart", res.data);
                typeChartInit("hearingChart", res.data, "听觉");
                typeChartInit("visionChart", res.data, "视觉");
                for (var i = 0; i < res.data.length; i++) {
                    gaugeChartInit("item" + i, res.data, res.data[i].item_no);
                    $("#visionName" + i).text(res.data[i].itemName);
                    $("#visionScore" + i).text(res.data[i].levelScore+"("+res.data[i].level+")");
                    $("#hearingName" + i).text(res.data[i].itemName);
                    $("#hearingScore" + i).text(res.data[i].levelScore+"("+res.data[i].level+")");
                    $("#levelName"+i).text(res.data[i].level);
                    $("#itemName" + i).text(res.data[i].itemName);
                    $("#itemScore" + i).text(res.data[i].levelScore+"("+res.data[i].level+")");
                }
            });
        })
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) { 
                return unescape(r[2]);
            }
            return null;
        }
        function request($, type, url, data, success) {
            $.ajax({
                url: url,
                data: data,
                type: type,
                success: function (res) {
                    success(res)
                }
            })
        }
    </script>
</body>
<style media="print">
    @media print {
        .pring-chart{
            margin-left:-70px !important;
        }
        .page-break {
            display: block !important;
            filter: none !important; 
            page-break-before: always;           
        }        
        .print-space{
            display: block !important;
            margin-bottom: 30px !important;
        }
        .no-print {
            display: none !important;
        }
        body{
            -webkit-print-color-adjust:exact;
            -moz-print-color-adjust:exact;
            -ms-print-color-adjust:exact;
            print-color-adjust:exact;
        }                
    }
</style>
<style type="text/css">
    
    .page-break{
        display: none;
    }
    .print-space{
        display: none;
    }
    .root {
        max-width: 842px;
        margin: 10px auto;
        background-color: #FA9F49;
        padding: 10px;
        height: 100%;
        font-size: 14px;
        overflow-y: auto;
        margin-bottom: 30px;
    }

    .page {
        background-color: #fff;
        border-radius: 5px;
        line-height: 30px;
        margin-top: 20px;
    }

    .page .title {
        border-bottom: #FA9F49 solid 1px;
        padding: 10px;
        color: #FA9F49;
        font-size: 18px;
        font-weight: bold;
    }

    .page .title i {
        display: inline-block;
        width: 10px;
        height: 15px;
        margin-right: 5px;
        background-color: #FA9F49;
        font-weight: bold;
    }

    .baseContent {
        padding: 20px 10px;
    }

    .baseContent td {
        width: 25%;
    }

    .baseContent .tableTitle {
        background-color: #FA9F49;
        color: #fff;
        text-align: center;
    }

    .baseContent span {
        padding-left: 5px;
    }

    .baseItem {
        display: flex;
        gap: 5px;
    }

    .baseItem span {
        display: block;
        font-size: 14px;
    }

    .baseItem span:first-child {
        background-color: #FA9F49;
        text-align: center;
        color: #fff;
        width: 40%;
    }

    .pageContent {
        padding: 10px;
    }

    .pageItem {
        font-weight: bold;
        color: #FA9F49;
        font-size: 16px;
    }

    .pageItem i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        background-color: #FA9F49;

        margin-right: 5px;
    }

    p {
        text-indent: 2em;
    }

    .resultTable {
        width: 100%;
        text-align: center;
    }

    .resultTable td {
        border: 1px solid #efefef;
        height: 40px;
        width: 33%;
    }

    .courseTable {
        width: 100%;
    }

    .courseTable td {
        border: 1px solid #efefef;
        height: 40px;
        padding: 5px;
    }
    .mark{
        line-height: 15px;
        height: 15px;
        margin-right: 5px;
    }
    .mark i{
        width: 15px;
        height: 10px;
        display: inline-block;
    }
</style>


</html>